<template>
    <div>
        <zh-card title="">
            <zh-form :model="pageData.queryParams" ref="queryFormRef" label-width="150px">
                
                
                <zh-form-select prop="fieldType" label="字段类型" allowClear :span="8" :fieldNames="{label: 'dictValue', value: 'dictKey'}" :options="pageData.dictData.FIELDTYPE"
                    v-model="pageData.queryParams.fieldType"></zh-form-select>
                <zh-form-input prop="fieldKey" label="字段标识" type="text" :span="8" dataType="common"
                    v-model="pageData.queryParams.fieldKey"></zh-form-input>
                <zh-form-input prop="fieldName" label="字段中文" type="text" :span="8" dataType="common"
                    v-model="pageData.queryParams.fieldName"></zh-form-input>

                <template v-if="pageData.advanced">
                    <zh-form-select prop="status" label="有效状态" allowClear :span="8" :fieldNames="{label: 'dictValue', value: 'dictKey'}" :options="pageData.dictData.STATUS"
                    v-model="pageData.queryParams.status"></zh-form-select>

                </template>
                <zh-form-query v-model="pageData.advanced" @queryClick="queryFileFieldParam" :formRef="queryFormRef">
                    <zh-button v-func:fileFieldParam0004 @click="showAddDialog">新增</zh-button>
                </zh-form-query>
            </zh-form>
        </zh-card>
        <zh-table title="元字段配置信息" ref="eduFileFieldParamTable" size="mini"  :url="VITE_FILE_API_URL+'fileFieldParam0001'"
            :columns="pageData.tableColumns" highlight-current-row>
            <template #op="scope">
                <el-tooltip content="查看" placement="top">
                    <el-button :icon="Document" link @click="showdetail(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                    <el-button v-func:fileFieldParam0005 :icon="Edit" link @click="showEditDialog(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                    <el-button :icon="Delete" type="danger" link @click="delFileFieldParam(scope.row)"></el-button>
                </el-tooltip>

            </template>
        </zh-table>
        <zh-dialog style="width:90%" :title=pageData.modalTitle v-model="pageData.visible">
            <FileFieldParamForm  ref="eduFileFieldParamPage" :show-flag="pageData.showFlag" :FileFieldParam="pageData.selectRow" v-model="pageData.visible"></FileFieldParamForm>
            <template #footer>
                <span class="dialog-footer">

                    <zh-button @click="pageData.visible = false">取消</zh-button>
                    <zh-button v-if="!pageData.showFlag" type="primary" @click="addFileFieldParam">
                        保存
                    </zh-button>
                </span>
            </template>
        </zh-dialog>

    </div>
</template>

<script lang="ts" setup name="fileFieldIndex">
import { Delete, Edit, Document } from '@element-plus/icons-vue'
import { ElMessageBox } from "element-plus";
import FileFieldParamForm from './component/FileFiedForm.vue'
const VITE_FILE_API_URL = import.meta.env.VITE_FILE_API_URL as string+'/doc/api/';

// 初始化
onMounted(() => {
    init();
})

// ------------------定义子组件--------------------------
const eduFileFieldParamTable = ref();
const queryFormRef = ref();
const eduFileFieldParamPage = ref();
// ------------------变量区------------------------------
const pageData = reactive({
    advanced: false,
    detailDialog: false,
    selectRow:{},
    visible:false,
    modalTitle:"操作",
    showFlag:false,
    tableColumns: [
        { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
        { field: 'fieldId', title: '文件附加字段id', visible: false, fixed: 'left',align: 'center', width: 100 },
        { field: 'fieldTypeName', title: '字段类型', visible: true, fixed: 'left',align: 'center', width: 150 },
        { field: 'fieldKey', title: '字段标识', visible: true, fixed: 'left',align: 'center', width: 150 },
        { field: 'fieldName', title: '字段中文', visible: true, fixed: 'left',align: 'center', width: 150 },
        { field: 'statusName', title: '有效状态', visible: true, fixed: 'left',align: 'center', width: 150 },

        { field: 'createName', title: '创建人ID', visible: false, fixed: 'left',align: 'center', width: 100 },
        { field: 'createFullName', title: '创建人', visible: true, fixed: 'left',align: 'center', width: 100 },
        { field: 'createTime', title: '创建时间', visible: true, fixed: 'left',align: 'center', width: 150 },
        { field: 'updateName', title: '更新人ID', visible: false, fixed: 'left',align: 'center', width: 100 },
        { field: 'updateFullName', title: '更新人', visible: false, fixed: 'left',align: 'center', width: 100 },
        { field: 'updateTime', title: '更新时间', visible: false, fixed: 'left',align: 'center', width: 150 },
        { field: 'del', title: '逻辑删除标志', visible: false, fixed: 'left',align: 'center', width: 150 },

        {
            field: 'op',
            title: '操作',
            visible: true,
            align: 'center',
            width: 100,
            fixed: 'right',
            slots: { default: 'op' }
        },
    ],
    queryParams: {
        fieldId:'',
        fieldType:'',
        fieldKey:'',
        fieldName:'',
        status: '',
        createName:'',
        createTime:'',
        updateName:'',
        updateTime:'',
        del:'',
    },
   
    dictFields: 'STATUS,FIELDTYPE',
    dictData: {} as any,
    AREACODEDATA: [] as any,
});
// ------------------方法区------------------------------
const init = () => {
    getDict();
    queryFileFieldParam();
}

// 查询数据字典信息
const getDict = () => {
    let params = {
        dictFields: pageData.dictFields,
    };
    $api.common.getBatchDict.post(params).then((res: any) => {
        pageData.dictData = res.result;
    }); 

};

const queryFileFieldParam = () => {
    eduFileFieldParamTable.value.query(pageData.queryParams);
}
const showAddDialog = () => {
    pageData.modalTitle = "新增元字段配置信息";
    pageData.visible = true;
    let params = {} as any
    pageData.selectRow = params;
    pageData.showFlag = false;

}
const showdetail = (row) => {
 pageData.modalTitle = '查看元字段配置信息';
 pageData.selectRow=row
 pageData.showFlag=true
 pageData.visible = true;
}
const showEditDialog = (row) => {
  pageData.modalTitle = '修改元字段配置信息';
  pageData.selectRow=row
  pageData.showFlag=false;
  pageData.visible = true;
}
const addFileFieldParam = () => {

    eduFileFieldParamPage.value.save().then(()=>{
        refreshTable();
    })
}
const refreshTable=()=>{
    eduFileFieldParamTable.value.refresh(pageData.queryParams);
};
const delFileFieldParam = ({ fieldId }) => {
    ElMessageBox.confirm('确定删除该元字段配置信息?').then(() => {
        $api.common.fileSend.post('fileFieldParam0006', { fieldId: fieldId }).then(res => {
            if (res.code == 0) {
                ElMessageBox.alert('删除成功');
                refreshTable();
            }
        })
    })
}

</script>
<style lang="scss" scoped>

</style>
